html{
  //font-size:62.5%;
}
body{
  background: #f0f0e1;
  font:300 1.6em/1.4em Helvetica, Arial, "sans-serif";
}
h1{padding:1.2em; text-align:center;font-size: 25px;font-weight: 700;margin-left: 30px;}
.scene{position:relative;
  display:block;
  margin:0 auto;
  width:450px;
  height:300px;
}
.plane,
.cloud{
  position:absolute;
}
/*plane animation*/
.plane{
  animation-duration: 1s;
  animation-name: anim-plane;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function:linear;

  animation-fill-mode:forwards;
  display:block;
  margin:0 auto;
  transform: translateY(80px);
  left:30%;
}

@keyframes anim-plane{
  to{
    transform:translateY(95px);
  }
}


/* Cloud Animation */

@keyframes fade{
  0%{ opacity: 0;}
  10%{ opacity: 1;}
  90%{ opacity:1;}
  100%{ opacity:0;}
}

@keyframes move{
  from{
    left:350px;
  }
  to{
    left:50px;
  }
}


.cloud{
  animation-duration:10s;
  animation-name:move, fade;
  animation-direction: normal;
  animation-iteration-count:infinite;
  animation-timing-function:linear;
  animation-fill-mode:both;

  display:block;
  background:url();
  height:40px;
  width:53px;
  margin:0 auto;
}
.cloud--small{
  animation-duration:6s;
  top:65px;
  left: 200px;
  transform: scaleX(0.5) scaleY(0.5);
}
.cloud--medium{
  animation-duration:5s;
  animation-delay:1s;
  top:95px;
  transform: scaleX(0.7) scaleY(0.7);
}
.cloud--large{
  animation-duration:4.5s;
  animation-delay:2.5s;
  top:120px;
  transform: scaleX(0.8) scaleY(0.8);
}
.cloud--super{
  animation-duration:5s;
  animation-delay:3s;
  top:95px;
  transform: scaleX(1) scaleY(1);
}

.whoami{
  padding-top:3em;
  text-align:center;
}
